// css选择器都有什么，权重是怎么计算的
 {
}

// 布局都有什么方式，float和position有什么区别
 {
}

/* <div id="main"><div id="content"></div></div>父元素和子元素宽高不能固定，如何实现水平垂直居中 */
 {
  /* 方式一：使用flex布局，给父元素添加flex，设置垂直和水平都居中的参数，内标签只要文字设置水平居中即可。 align-items:center  justify-content:center
  方式二：margin 50% auto; top:-本身盒子高度 postion:absluter
  方式三：绝对定位和0， width:10px;height:10px;margin:auto;top:0;left:0;right:0;bottom:0; */
}

/* css预处理器,LESS带来的好处? */
 {
  /* 变量、嵌套。 */
}

/* // BFC是什么，有哪些应用场景 */
 {
  /* 
  BFC（块级格式化上下文） 是生成一个不会和其他盒子重叠的独立区域（块级元素），当重叠了的盒子只要触发了BFC原则，那么渲染就会按BFC模型生成，所以当看到有些盒子重叠有些人就会用overflow:hidden来生成BFC独立区域，清除内部浮动元素-父元素设置成BFC，那么浮动元素也会跟着计算
  哪些元素会生成BFC？ 根元素、float属性不为none、postion为absolute,fixed、display为inline-block, table-call, table-caption, flex,inline-flex、overflow不为visible

  像二个元素之间都有左右空间间隔，但二个元素正中间的间隔其实只有一个元素的间隔px，不会叠加二个元素分别的间隔，所以像此应用场景就要用BFC让每个元素独立计算，以达到中间间隔会累加二个元素的边距。
  */
}

/* CSS如何画出一扇形? */
 {
}

/* px和em的区别 */
 {
  /* 
  相同点：px和em都是长度单位；
  异同点：px的值是固定的，指定是多少就是多少，计算比较容易。em得值不是固定的，并且em会继承父级元素的字体大小。

  浏览器的默认字体高都是16px。所以未经调整的浏览器都符合: 1em=16px。那么12px=0.75em, 10px=0.625em。
  */
}

/* 
 * 该 JS 应在 head 中尽可能早的引入，减少重绘。
 *
 * fixScreen 方法根据两种情况适配，该方法自动执行。
 * 方案一： 
 * 定宽： 对应 meta 标签写法 -- <meta name="viewport" content="width=750">
 * 该方法会提取 width 值，主动添加 scale 相关属性值。
 * 注意： 如果 meta 标签中指定了 initial-scale， 该方法将不做处理（即不执行）。
 *      
 * 方案二：
 * REM: 不用写 meta 标签，该方法根据 dpr 自动生成，并在 html 标签中加上 data-dpr 和 font-size 两个属性值。
 * 该方法约束：IOS 系统最大 dpr = 3，其它系统 dpr = 1，页面每 dpr 最大宽度（即页面宽度/dpr） = 750，REM 换算比值为 16。
 * 对应 css 开发，任何弹性尺寸均使用 rem 单位，rem 默认宽度为 视觉稿宽度 / 16;
 * scss 中 $ppr(pixel per rem) 变量写法 -- $ppr: 750px/16/1rem;
 * 元素尺寸写法 -- html { font-size: $ppr*1rem; } body { width: 750px/$ppr; }。
 * 
 * 方案三：
 * 根据屏幕宽度判断大与640的话（每一份最大分40px），如果小与640宽度的话，宽度除余 16份数
  <meta id="viewport" name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">
  <script>
    (function setSize(){
        alert(document.documentElement.clientWidth / 16)
        var _html = document.getElementsByTagName('html')[0];
        var ch = document.documentElement.clientWidth;

        ch>640?_html.style.fontSize = '40px':_html.style.fontSize = ch / 16 + 'px';
        window.onresize = setSize;
    })();
  </script>
 * 
 * 方案四：
 * 媒体查询改变.css
  通过CCS3属性媒体查询来改变，设备不同设备窗口低版本 html设置使用px，高版本设备优先使用vw视口宽度变化
  学习文章http://www.zhangxinxu.com/wordpress/2016/08/vw-viewport-responsive-layout-typography/
  具体写好的代码文件在》工作插件包\手机JS兼容方法\媒体查询改变.css

  转换关系，16为html字体大字
  |  px  |     rem       |
  ------------------------
  |  12  | 12/16 = .75   |
  |  14  | 14/16 = .875  |
  |  16  | 16/16 = 1     |
  |  18  | 18/16 = 1.125 |
  |  20  | 20/16 = 1.25  |
  |  24  | 24/16 = 1.5   |
  |  30  | 30/16 = 1.875 |
  |  36  | 36/16 = 2.25  |
  |  42  | 42/16 = 2.625 |
  |  48  | 48/16 = 3     |
  ------------------------- 

  下面是新版本用vw动态计算，设计稿375
  html {
    font-size: calc((100 / 375) * 100vw );
  }
 */

/* flex: 0 1 auto表示什么意思 */
 {
  /* 
  其实就是弹性盒子的默认值，表示flex-grow空间占有比例，flex-shrink缩小比例，flex-basis默认宽度占比（当还有多余空间可被分配时，会按flex-grow比例分配多余空间）
  */
}

/* 求最终 left、right 的宽度 */
 {
  /* 
  <div class="container">
    <div class="left"></div>
    <div class="right"></div>
  </div>
   */
  * {
    padding: 0;
    margin: 0;
  }
  .container {
    width: 600px;
    height: 300px;
    display: flex;
  }
  .left {
    flex: 1 2 300px;
    background: red;
  }
  .right {
    flex: 2 1 200px;
    background: blue;
  }

  /* 
  解题思路：
  剩余的空间：600 - (300 + 200) = 100。
  子元素的 flex-grow 的值分别为 1，2， 剩余空间用3等分来分
  100 / 3 = 33.3333333
  所以 left = 300 + 1 * 33.33 = 333.33
  right = 200 + 2 * 33.33 = 266.67
  */
}

 {
}
